<nz-modal
  nzClassName="custom-model-wrap"
  [nzFooter]="null"
  [(nzVisible)]="isVisible"
  [nzTitle]="'指定机型'"
  (nzOnCancel)="handleCancel()">
  <div *nzModalContent>
    <div class="custom-model-body">
      <ng-container *ngIf="treeLoading && !nodes.length;else templateTree">
        <div nz-row nzJustify="center" nzAlign="top">
          <nz-spin nzSimple nzTip="Loading..."></nz-spin>
        </div>
      </ng-container>

      <ng-template #templateTree>
        <nz-input-group [nzSuffix]="suffixIcon">
          <input type="text" nz-input placeholder="请输入..." [(ngModel)]="searchValue" />
        </nz-input-group>
        <ng-template #suffixIcon>
          <i nz-icon nzType="search"></i>
        </ng-template>

        <nz-divider></nz-divider>

        <nz-tree
          #nzTreeComponent
          [nzData]="nodes"
          nzCheckable
          nzVirtualHeight="520px"
          [nzExpandAll]="false"
          [nzCheckStrictly]="false"
          [nzSearchValue]="searchValue"
          [nzCheckedKeys]="defaultCheckedKeys"
          [nzExpandedKeys]="defaultCheckedKeys"
          (nzSearchValueChange)="nzEvent($event)"
        ></nz-tree>
      </ng-template>
    </div>

    <div class="custom-model-foot">
      <div class="custom-foot-cont">
        <button nz-button nzType="default" (click)="handleCancel()">取消</button>
        <button nz-button nzType="primary" (click)="submitTreeData()">确定</button>
      </div>
    </div>
  </div>
</nz-modal>